<template>
  <inline-Modal
    :visible="visible"
    title="字典分类"
    :showOk="false"
    @cancel="
      () => {
        $emit('cancel');
      }
    "
  >
    <tool-bar>
      <template slot="toolBtn" slot-scope="scope">
        <a-button class="cu-btn-primary" icon="plus" @click="handleAdd">
          新增
        </a-button>
        <a-button type="link" icon="upload" @click="importReportFile"
          >{{ $ct("Import", "导入") }}
        </a-button>
      </template>
    </tool-bar>
    <div class="page-content">
      <a-table
        ref="treeTable"
        rowKey="uuid"
        :columns="columns"
        :data-source="treeData"
        :pagination="false"
        :scroll="scrollXY"
        :defaultExpandedRowKeys="defaultExpandedRowKeys"
      >
        <span slot="renderAction" slot-scope="text, record, index">
          <template>
            <a @click="handleEdit(record)">编辑</a>
            <span class="action-margin"></span>
            <a @click="handleSub(record)" class="action-delete">删除</a>
            <a-dropdown>
              <a class="ant-dropdown-link">
                {{ $ct("more", "更多") }}
                <a-icon type="down" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a @click="exportFile(record)">{{
                    $ct("exportFile", "导出文件")
                  }}</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </span>
      </a-table>
    </div>

    <edit-form
      ref="masterModal"
      :loading="confirmLoading"
      :visible="editVisible"
      :model="mdl"
      @cancel="handleCancel"
      @ok="handleOk"
    />

    <web-upload
      ref="webUploadModal"
      :visible="visibleFile"
      :showTipText="true"
      :width="450"
      url="/system/dicSet/importSysDicSetJson"
      @cancel="() => (visibleFile = false)"
      @ok="importReportJson"
    />
  </inline-Modal>
</template>

<script>
import { TreeGrid } from "@/components";
import { treeGridMixin } from "@/mixins/treeGridMixin";
import editForm from "./masterEdit.vue";
import { getToken } from "@/utils/TopVUI";
import { baseUrl } from "@/services/baseUrl.js";

export default {
  components: { TreeGrid, editForm },
  mixins: [treeGridMixin],
  props: {
    visible: {
      type: Boolean,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {
      title: "",
      confirmLoading: false,
      columns: [
        {
          title: "名称",
          align: "left",
          dataIndex: "dicSetName",
        },
        {
          title: "编码",
          dataIndex: "dicSetCode",
          align: "center",
        },
        {
          title: "排序",
          dataIndex: "dicSetSort",
          align: "center",
        },
        {
          title: "操作",
          width: 200,
          align: "center",
          dataIndex: "action",
          scopedSlots: { customRender: "renderAction" },
        },
      ],
      parameter: {
        father: {
          levelId: 1,
        },
        children: {},
      },
      mdl: null,
      editVisible: false,
      selectedRowKeys: [],
      treeData: [],
      defaultExpandedRowKeys: [],
      pageClientHeight: 0,
      visibleFile: false,
      token: "",
    };
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onChange,
      };
    },
    scrollXY() {
      let pageClientHeight = this.pageClientHeight
        ? this.pageClientHeight
        : 500;
      let height = pageClientHeight - 160;
      return { y: height };
    },
  },
  created() {
    this.loadData();
  },
  mounted() {
    this.resizeHandler();
    this.initResizeEvent();
    this.token = getToken();
  },
  beforeDestroy() {
    this.destroyResizeEvent();
  },
  methods: {
    initResizeEvent() {
      window.addEventListener("resize", this.resizeHandler, false);
    },
    //移除resize
    destroyResizeEvent() {
      window.removeEventListener("resize", this.resizeHandler);
    },
    resizeHandler() {
      // 获取页面内容的高度
      this.pageClientHeight = document.getElementsByClassName(
        "page-content"
      )[0]?.clientHeight;
    },
    add(m, data) {
      console.log(m, data);
    },
    edit(m, data) {
      console.log(m, data);
    },
    handleAdd() {
      this.editVisible = true;
      this.$refs.masterModal.form.resetFields();
      this.$refs.masterModal.title = "新增";
    },
    handleEdit(record) {
      this.editVisible = true;
      this.mdl = record;
      this.$refs.masterModal.title = "编辑";
    },
    loadData() {
      this.$post("/system/dicSet/getTreeSysDicSet?systemdic=y").then((res) => {
        if (res.statusCode === 200) {
          this.treeData = res.data;
          this.defaultExpandedRowKeys = [res.data[0].uuid];
        }
      });
    },
    onChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    handleOk() {
      const form = this.$refs.masterModal.form;
      this.confirmLoading = true;
      let url = "";
      form.validateFields((errors, values) => {
        if (!errors) {
          if (values.uuid) {
            url = "/system/dicSet/update";
          } else {
            url = "/system/dicSet/save";
            values.systemdic = "y";
          }
          this.$post(url, values)
            .then((res) => {
              if (res.statusCode === 200) {
                this.loadData();
                this.$emit("reloadTree");
                this.editVisible = false;
                this.$message.success(res.message || "操作成功", 1.5);
              } else {
                this.$message.error(res.message || "操作失败", 1.5);
              }
            })
            .finally(() => {
              this.confirmLoading = false;
            });
        } else {
          this.confirmLoading = false;
        }
      });
    },
    handleCancel() {
      this.editVisible = false;
    },
    handleSub(record) {
      const that = this;
      that.$confirm({
        title: that.$ct("tips", "提示"),
        content: that.$ct(
          "deleteConfirmationPrompt",
          "确定删除该数据吗？删除之后不可恢复！"
        ),
        okText: that.$ct("confirm", "确定"),
        cancelText: that.$ct("cancel", "取消"),
        closable: true,
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          that
            .$post("/system/dicSet/delete", {
              uuid: record.uuid,
            })
            .then((res) => {
              if (res.statusCode === 200) {
                that.$message.success(res.message);
                that.loadData();
                that.$emit("reloadTree");
              } else {
                that.$message.info(res.message);
              }
            });
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    },
    importReportJson() {
      this.visibleFile = false;
      this.loadData();
    },
    importReportFile() {
      this.$refs.webUploadModal.add();
      this.visibleFile = true;
    },
    exportFile(record) {
      window.location.href =
        baseUrl +
        "/system/dicSet/exportSysDicSetJson?uuid=" +
        record.uuid +
        "&token=" +
        this.token;
    },
  },
};
</script>
<style scoped lang="less">
/deep/.ant-table-tbody > tr > td,
/deep/.ant-table-thead > tr > th {
  padding: 9px !important;
}
</style>
